<template>
  <div class="dashboard-container">
    <el-row :gutter="12">
      <el-col :span="24">
        <el-card shadow="hover">
          <div>
            未合并记录数：{{unmergeCount}}
          </div>
          <div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-card shadow="always" style="margin-top: 20px;height: 740px" :body-style="{height:'100%'}">
      <el-row style="margin-bottom: 10px">
        <el-button type="success" size="mini" :loading="loading" v-on:click="callable" icon="el-icon-caret-right">
          {{ loading ? '正在运行中' : '任务启动' }}
        </el-button>
        <el-button type="primary" size="mini" v-on:click="getMergeInfo">刷新</el-button>
        <el-button type="success" size="mini" v-on:click="showDetail(currentRow)" :disabled="disabled">查看详情</el-button>
      </el-row>
      <el-table
        :data="mergeInfoList"
        size="mini"
        height="640"
        style="width: 100%"
        @row-dblclick="showDetail"
        highlight-current-row
        stripe
        @current-change="handleCurrentChange"
      >
        <el-table-column
          type="index"
        >
        </el-table-column>
        <el-table-column
          prop="batchId"
          label="批次号"
        >
        </el-table-column>
        <el-table-column
          label="开始时间"
          width="160"
        >
          <template slot-scope="scope">{{ scope.row.startTime|dateFormat }}</template>
        </el-table-column>
        <el-table-column
          label="结束时间"
          width="160"
        >
          <template slot-scope="scope">{{ scope.row.endTime|dateFormat }}</template>
        </el-table-column>

        <el-table-column
          prop="resultMsg"
          label="描述"
          width="500"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          width="120"
          label="处理记录数">
          <template slot-scope="scope">
            {{ scope.row.status === 1 ? '' : scope.row.mergeAmount }}
          </template>
        </el-table-column>
        <el-table-column
          width="320"
          label="状态">
          <template slot-scope="scope">
            <el-progress :percentage="scope.row.status===1?scope.row.mergeAmount:100"
                         :status="formatStatus(scope.row.status)">
            </el-progress>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog title="任务执行详情"
               :visible.sync="dialogVisible"
               width="60%">
      <el-table
        :data="mergeList"
        size="mini"
        height="580"
        style="width: 100%"
      >
        <el-table-column
          type="index"
        >
        </el-table-column>
        <el-table-column
          label="时间"
        >
          <template slot-scope="scope">{{ scope.row.execTime|dateFormat }}</template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="详情"
          width="700"
          :show-overflow-tooltip="true"
        >
        </el-table-column>
        <el-table-column
          prop="megerAmount"
          label="生成数量">
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getMergeLog, propAutoMerge, getMergeInfo ,getUnMergeCount} from '@/api/callable'

export default {
  name: 'Dashboard',
  data() {
    return {
      loading: false,
      status: null,
      percentage: 0,
      mergeList: [],
      batchId: '',
      start: null,
      currentAmount: 0,
      mergeInfoList: [],
      dialogVisible: false,
      intervalId: null,
      disabled: true,
      currentRow: null,
      unmergeCount:0
    }
  },
  mounted() {
    const _this = this
    _this.getMergeInfo()
    _this.getUnMergeCount()
  },
  methods: {
    getMergeInfo() {
      const _this = this
      getMergeInfo().then(resp => {
        _this.mergeInfoList = resp.data
      })
      if (!_this.intervalId) {
        _this.intervalId = setInterval(function() {
          getMergeInfo().then(resp => {
            _this.mergeInfoList = resp.data
            const item = resp.data.find(item => {
              return item.status === 1
            })
            if (!item && !_this.loading) {
              clearInterval(_this.intervalId)
              _this.intervalId = null
            } else {
              _this.loading = true
            }
          })
          _this.getUnMergeCount()
        }, 5000)
      }

    },
    fetchData(batchId) {
      getMergeLog(batchId).then(response => {
        this.mergeList = response.data
      })
    },
    callable() {
      const _this = this
      _this.loading = true
      _this.batchId = this.guid()
      _this.getMergeInfo()
      propAutoMerge(_this.batchId).then(resp => {
        // clearInterval(intervalId)
        _this.percentage = 100
        _this.status = 'success'
        _this.loading = false
        _this.getMergeInfo()
        _this.fetchData(_this.batchId)
      })

    },
    S4() {
      return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)
    },
    guid() {
      return (this.S4() + this.S4() + '-' + this.S4() + '-' + this.S4() + '-' + this.S4() + '-' + this.S4() + this.S4() + this.S4())
    },
    formatStatus(status) {
      let statusText = null
      if (status === 2) {
        statusText = 'success'
      } else if (status === 3) {
        statusText = 'exception'
      }
      return statusText
    },
    showDetail(row) {
      this.fetchData(row.batchId)
      this.dialogVisible = true
    },
    handleCurrentChange(row) {
      if (row) {
        this.disabled = false
        this.currentRow = row
      } else {
        this.disabled = true
      }
    },
    getUnMergeCount(){
      getUnMergeCount().then(resp=>{
        this.unmergeCount = resp.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}


</style>
